<template>
    <el-dialog
        title="批量导出点位"
        :model-value="modelValue"
        width="604px"
        custom-class="batch-point"
        @closed="handleClose"
    >
        <h3 class="batch-title">选择合并方式：</h3>
        <div class="batch-box">
            <el-radio-group v-model="radioBatch" class="batch-radio">
                <el-radio label="1">合并到唯一的sheet页（所选方案总调度数大于100万时无法合并）</el-radio>
                <el-radio label="2">每个方案使用单独的sheet页</el-radio>
                <el-radio label="3">合并为压缩包，每个方案使用独立的表格</el-radio>
            </el-radio-group>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" :loading="submitLoading" :disabled="!radioBatch" @click="submit">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from 'vue';
import { batchExportPoint } from '@/api/point';
import { downLoadCommon } from '@/utils/common';
import { useStore } from 'vuex';

const emits = defineEmits<{ (e: 'update:modelValue', visible: boolean): void; (e: 'batchSubmit'): void }>();
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    selectData: {
        type: Array,
        default: () => {
            return [];
        },
    },
});
const radioBatch = ref('');
const submitLoading = ref(false);
const handleClose = () => {
    emits('update:modelValue', false);
};
const store = useStore();
const deleted = computed(() => store.state.plan.deleted);
const submit = async () => {
    submitLoading.value = true;
    try {
        let res = await batchExportPoint({
            planIdList: props.selectData.map((item: any) => item.planId),
            type: +radioBatch.value,
            deleted: deleted.value,
        });
        downLoadCommon(res);
    } catch (e) {
        console.log('e', e);
    } finally {
        submitLoading.value = false;
        handleClose();
        emits('batchSubmit');
    }
};
</script>

<style lang="scss" scoped>
.batch-point {
    .batch-title {
        font-weight: 400;
        font-size: 14px;
        color: #252525;
        letter-spacing: 0;
        text-align: left;
        line-height: 18px;
        margin-bottom: 11px;
    }

    .batch-radio {
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        line-height: 18px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>
